<template>
	<view class="container">
		<view class="item">
			<view class="title">
				<text>{{formObj.title}}</text>
			</view>
			<view class="data">
				<text>发表时间：{{formObj.createTime}}</text>
				<text class="number">浏览量：{{formObj.viewCount}}</text>
				<text class="fabulous">点赞数：{{formObj.likeCount}}</text>
			</view>
			<view class="content">
				
				
				<text>{{formObj.content}}</text>
			</view>
			<view class="like">
				<button class="likeBtn" @click="likehealth()">
					<image v-if="flag" src="../../static/good.png"></image>
					<image v-else src="../../static/alreayGood.png"></image>
					点赞
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { getDetail, getLike } from '@/api/index.js'
	export default {
		data() {
			return {
				id: '',
				formObj: {},
				flag: true
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getDataList()
		},
		methods:{
			likehealth(){
				if(!this.flag) {
					uni.showToast({
						title:'您已经点过了喔',
						icon: 'none'
					})
				} else {
					getLike({id: this.id}).then(res =>{
						if(res.code !== 200) {
							uni.showToast({
									title: res.message,
									icon: 'none'
								})
							return
						}
						this.flag = false
						this.getDataList()
					})
				}
			},
			getDataList() {
				getDetail({id: this.id}).then(res =>{
					if(res.code !== 200) {
						uni.showToast({
								title: res.message,
								icon: 'none'
							})
						return
					}
					this.formObj = res.data.item || {}
				})
			}
		}
		
	}
</script>

<style>
	.item {
		padding: 20rpx;
	}
	.title {
		padding-top: 50rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: larger;
		font-weight: bold;
	}
	.content {
		text-indent: 70rpx;
		font-size: 40rpx;
	}

	.data {
		height: 100rpx;
		width: auto;
		margin-top: 50rpx;
		font-size: 20rpx;
	}

	.number {
		margin-left: 50rpx;
	}

	.fabulous {
		margin-left: 20rpx;
	}
	.like {
		display: flex;
	    flex-direction: row;
		margin-left: 500rpx;
	}
    .likeBtn {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.likeBtn::after {
		  
		  border: 0; 
		}
	image {
		height: 50rpx;
		width: 50rpx;
	}
</style>
